import React from 'react';
import ReactSwipes from 'react-swipes'
import "./index.css";

class Swipes extends React.Component {
    render() {
        // swipes 的配置
        let opt = {
            distance: document.querySelector('body').offsetWidth, // 每次移动的距离，卡片的真实宽度，需要计算
            currentPoint: 0, // 初始位置，默认从0即第一个元素开始
            autoPlay: true,
            loop: true,
            swTouchstart: ev => {},
            swTouchmove: ev => {},
            swTouchend: ev => {
                let data = {
                    moved: ev.moved,
                    originalPoint: ev.originalPoint,
                    newPoint: ev.newPoint,
                    cancelled: ev.cancelled
                };
                console.log(data);
            }
        }

        let flipsnap = {
            width: document.querySelector('body').offsetWidth * 5,
        }

        return (
            <section>
                <div className = "viewport">
                    <div style={flipsnap}>
                        <ReactSwipes className="card-slide" options = {opt} >
                            {
                                [1, 2, 3, 4, 5].map((val, index) => (
                                    <div className = "item" key = {index} >
                                        {val}
                                    </div>
                                ))
                            }
                        </ReactSwipes>
                    </div>
                </div>
            </section>
        );
    }
}

export default Swipes;
